<template>
    <div class="count">
      <div class="login-count">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="login-form">
          <h3 class="title">登录</h3>
          <el-form-item  prop="username">
            <el-input class="input-with-select"  v-model="ruleForm.username" clearable>
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <el-form-item  prop="password">
            <el-input
                type="password"
                v-model="ruleForm.password"
                class="input-with-select" clearable>
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <el-form-item>
            <el-button :loading="load" type="primary" @click="submitForm(ruleFormRef)" style="width: 100%">登录</el-button>
          </el-form-item>
  
          <div class="three-party-login">
            其他方式登录
          </div>
          <div class="three-party-icon">
            <span class="login-third-item login-third-qq"></span>
            <span class="login-third-item login-third-weixin"></span>
            <span class="login-third-item login-third-baidu"></span>
          </div>
        </el-form>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive,ref } from 'vue'
  import { useRouter } from 'vue-router'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import {login} from '../api/loginAuth'
  
  const ruleFormRef = ref<FormInstance>()
  const router = useRouter();
  const load = ref(false);
  const ruleForm = reactive({
    username:'',
    password:'',
  })
  const rules = reactive<FormRules>({
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
      if (valid) {
        load.value = true;
        login(ruleForm).then((res: any) => {
          console.log('登录成功：',res)
          localStorage.setItem("accessToken",res.accessToken);
          router.replace("/");
        }).catch((error: any) => {
          console.log('请求异常：', error)
          load.value = false;
        })
      } else {
        ElMessage.error('请填写数据')
      }
    })
  }
  </script>
  
  <style scoped>
  .count{
    width: 100vw;
    height: 100vh;
  }
  .login-count{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .login-form{
    border-radius: 15px;
    margin: 180px auto;
    width: 250px;
    padding: 15px 35px 15px 35px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .title{
    text-align: center;
  }

  .three-party-login{
    text-align: center;
    color: gray;
    font-size: 12px;
  }
  .three-party-icon{
    text-align: center;
    color: gray;
    font-size: 12px;
  }
  .three-party-icon .login-third-item{
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50% 50%;
    background: #ccc;
    cursor: pointer;
  }
  .three-party-icon .login-third-qq{    
    background: url(../assets/QQ-circle-fill.png) no-repeat 50%/cover;
  }
  .three-party-icon .login-third-baidu{
    background: url(../assets/baidu-bg.png) no-repeat 50%/cover;
  }
  .three-party-icon .login-third-weixin{
    background: url(../assets/weixin_mw.png) no-repeat 50%/cover;
  }
  </style>